<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="layout"
      th:with="activeNav='bannermanage'" xmlns:sec="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Banner管理</title>
</head>
<body>
<div layout:fragment="content">
    <section class="content-header">
        <h1>
            Banner管理
        </h1>
    </section>
    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="portlet light bordered" style="width:auto;">
                    <div class="portlet-body">
                        <div class="table-toolbar">
                            <form class="form-horizontal" method="post" id="filter_form" enctype="multipart/form-data">
                                <div class="form-body">
                                    <div class="form-group">
                                        <label class="col-sm-1 control-label" style="width: 10%">BannerID</label>
                                        <div class="col-sm-2">
                                            <input type="text" class="form-control" name="id"
                                                   onkeyup="value=value.replace(/[^\d]/g,'')"
                                                   placeholder="请输入BannerID"/>
                                        </div>
                                        <label class="col-sm-1 control-label" style="width: 10%">状态</label>
                                        <div class="col-sm-2">
                                            <select class="form-control" id="statusid" name="status">
                                                <option value="">--全部--</option>
                                                <option value="0">待上架</option>
                                                <option value="1">已上架</option>
                                                <option value="2">已下架</option>
                                                <option value="3">已失效</option>
                                            </select>
                                        </div>
                                        <label class="col-sm-1 control-label" style="width: 10%">Banner时间</label>
                                        <div class="col-sm-2">
                                            <div class="input-group">
                                                <input type="text" class="form-control form_datetime_start_self"
                                                       id="starttimeid"
                                                       name="bannerStartTime" placeholder="开始时间">
                                                <span class="input-group-btn">
                                            <button class="btn default date-set" type="button">
                                                <i class="fa fa-calendar"></i>
                                            </button>
                                        </span>
                                            </div>
                                        </div>

                                        <label class="col-sm-1 control-label"
                                               style="margin-left: -7%">至</label>
                                        <div class="col-sm-2">
                                            <div class="input-group">
                                                <input type="text" class="form-control form_datetime_end_self"
                                                       id="endtimeid"
                                                       name="bannerEndTime" placeholder="结束时间">
                                                <span class="input-group-btn">
                                            <button class="btn default date-set" type="button">
                                                <i class="fa fa-calendar"></i>
                                            </button>
                                        </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-1 control-label" style="width: 10%">Banner名称</label>
                                        <div class="col-sm-2">
                                            <input type="text" onkeyup="value=value.replace(/[ ]/g,'')"
                                                   class="form-control"
                                                   name="name" placeholder="请输入Banner名称"/>
                                        </div>
                                        <label class="col-sm-1 control-label" style="width: 10%">集团/商场</label>
                                        <div class="col-sm-2">
                                            <select class="form-control select2 select2-hidden-accessible"
                                                    name="selectMallCode"
                                                    id="mallId" tabindex="-1" aria-hidden="true">
                                                <option value="-1">--全部--</option>
                                                <option value="0">集团</option>
                                                <option th:each="mall : ${mallList}" th:value="${mall.mallCode}"><span
                                                        th:text="${mall.mallName}">组一</span></option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3"></label>
                                        <div class="col-md-1" style="margin-top: 0px;width:auto;float: right">
                                            <div class="btn-group btn-group-devided" data-toggle="buttons"
                                                 style="width: auto; height: 40px;float: right;">
                                                <div style="float: right;margin-right: 5px">
                                                    <a style="margin-right: 1px" class="btn default"
                                                       onclick="resetForm()">重置
                                                        <i class="fa fa-gavel"></i>
                                                    </a>
                                                </div>
                                                <div sec:authorize-url="/work/bannerSort"
                                                     style="float: right;margin-right: 5px">
                                                    <div style="float: right;margin-right: 5px">
                                                        <button type="button" style="margin-right: 1px"
                                                                class="btn btn-info"
                                                                onclick="showOnlineBanner()">排序和上下架
                                                            <i class="fa fa-gavel"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                                <div style="float: right;margin-right: 5px">
                                                    <button type="button" style="margin-right: 1px" class="btn yellow"
                                                            onclick="exportsExcel()">导出
                                                        <i class="fa  fa-cloud-download"></i></button>
                                                </div>
                                                <div style="float: right;margin-right: 5px">
                                                    <button type="button" style="margin-right: 1px"
                                                            class="btn btn-primary"
                                                            id="search-button">查询
                                                        <i class="fa fa-repeat"></i>
                                                    </button>
                                                </div>
                                                <div style="float: right;margin-right: 5px">
                                                    <button type="button" style="margin-right: 1px"
                                                            class="btn btn-success"
                                                            onclick="showBanner()">新增
                                                        <i class="fa fa-plus"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div id="sample_1_wrapper" class="dataTables_wrapper no-footer" style="margin-top: -50px;">
                            <table class="table table-striped table-bordered table-hover" id="initTables"
                                   style="word-break:break-all;" width="100%">
                                <thead>
                                <tr>
                                    <!--设置第一列为序号列(datatable自动生成)-->
                                    <th style="width: 8%;">序号</th>
                                    <th style="width: 10%">BannerID</th>
                                    <th style="width: 12%">Banner名称</th>
                                    <th style="width: 10%">集团/商场</th>
                                    <th style="width: 10%">发布时间</th>
                                    <th style="width: 15%">Banner时间</th>
                                    <th style="width: 20%">链接</th>
                                    <th style="width: 8%">状态</th>
                                    <th style="width: 8%">操作</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div id="starModal" class="modal fade" style="display: none;">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">×</span></button>
                                <h4 class="modal-title">新增</h4>
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <div class="portlet-body form">
                                        <form class="form-horizontal" role="form" id="bannerformid"
                                              enctype="multipart/form-data"
                                              method="post">
                                            <div class="form-body">
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label">Banner名称:</label>
                                                    <div class="col-sm-7">
                                                        <input type="text" class="form-control"
                                                               placeholder="请填写Banner名称"
                                                               data-rule="required()||/^.{2,4}$/i/请输入2~4个字符"
                                                               onkeyup="value=value.replace(/[ ]/g,'')"
                                                               name="name">
                                                    </div>
                                                </div>
                                                <div class="form-group form-inline">
                                                    <label class="col-sm-3 control-label">上传图片:</label>
                                                    <div class="col-sm-7">
                                                        <label class="col-sm-3 control-label"
                                                               style="margin-left:-10%">主图:</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label"></label>
                                                    <div class="col-sm-7">
                                                    <span class="btn btn-info fileinput-button">
                                                        <span>选择图片</span>
                                                        <i class="fa fa-plus"></i>
                                                        <input type="file" id="bigfileid"
                                                               accept=".JPEG,.JPG,.PNG,.jpeg,.jpg,.png"
                                                               onchange="getimginfo(this,0)">
                                                    </span>
                                                        <button type="button" id="biguploadId" class="btn btn-info"
                                                                onclick="upload(0)">上传
                                                        </button>
                                                        <input type="text" id="bigimageurlid" name="bigImage" hidden/>
                                                        <input type="text" id="fileUploadUrl" hidden
                                                               th:value="${fileUploadUrl}"/>
                                                        <input type="text" id="token" name="token" hidden
                                                               th:value="${token}"/>
                                                        <input type="text" id="bigimagenochangeid" hidden/>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label"></label>
                                                    <div class="col-sm-7">
                                                        <span id="bigid"></span>
                                                        <span id="bigtipid" hidden style="color: red">请上传文件</span>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label"></label>
                                                    <div class="col-sm-9">
                                                        <span>尺寸要求:750*750px 大小不超过10M，限JPEG,JPG,PNG格式</span>
                                                        <img id="bigshowurlid" style="height: 20%;width: 30%">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label"></label>
                                                    <div class="col-sm-7">
                                                        <span>小图:</span>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label"></label>
                                                    <div class="col-sm-7">
                                                    <span class="btn btn-info fileinput-button">
                                                        <span>选择图片</span>
                                                        <i class="fa fa-plus"></i>
                                                        <input type="file" id="smallfileid"
                                                               accept=".JPEG,.JPG,.PNG,.jpeg,.jpg,.png"
                                                               onchange="getimginfo(this,1)">
                                                    </span>
                                                        <button id="smalluploadId" type="button" class="btn btn-info"
                                                                onclick="upload(1)">上传
                                                        </button>
                                                        <input type="text" id="smallimageurlid" name="smallImage"
                                                               hidden/>
                                                        <input type="text" id="smallnoimagechangeid" hidden/>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label"></label>
                                                    <div class="col-sm-7">
                                                        <span id="smallid"></span><span id="smalltipid" hidden
                                                                                        style="color: red">请上传文件</span>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label"></label>
                                                    <div class="col-sm-9">
                                                        <span>尺寸要求:606*345px 大小不超过10M,限JPEG,JPG,PNG格式</span>
                                                        <img id="smallshowurlid" style="height: 20%;width: 30%">
                                                    </div>
                                                </div>
                                                <div sec:authorize-url="/work/showMallSelectPoster">
                                                    <div class="form-group">
                                                        <label class="col-sm-3 control-label">对应链接:</label>
                                                        <label class="col-sm-3 control-label"
                                                               style="width: 22%;text-align: left;">
                                                            <input id="postercheckedid" type="radio" name="linkType"
                                                                   value="1"
                                                                   onclick="checkboxOnclick(this,1)">
                                                            电子海报:
                                                        </label>
                                                        <div class="col-sm-6 form-inline">
                                                            <select style="width: 100%" name="link"
                                                                    class="form-control selectpicker"
                                                                    id="postselectid">
                                                                <option value="">--请选择--</option>
                                                            </select>
                                                            <span name="linktipname" hidden
                                                                  style="color: rgb(204, 0, 0)">请选择</span>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-sm-3 control-label"></label>
                                                        <label class="col-sm-3 control-label"
                                                               style="width: 22%;text-align: left;">
                                                            <input id="minprogramcheckedid" type="radio" name="linkType"
                                                                   value="2"
                                                                   onclick="checkboxOnclick(this,2)">
                                                            微信H5:
                                                        </label>
                                                        <div class="col-sm-6 form-inline">
                                                            <input id="h5id" disabled="true" style="width: 100%"
                                                                   type="text"
                                                                   name="link"
                                                                   class="form-control"
                                                                   placeholder="微信H5链接">
                                                            <span>例:https://open.weixin.qq.com/connect/test</span>
                                                            <span>如需新增域名，请向集团申请</span><br/>
                                                            <span name="linktipname" hidden
                                                                  style="color: rgb(204, 0, 0)">请填写H5链接</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div sec:authorize-url="/work/showGroupSelectPoster">
                                                    <div class="form-group">
                                                        <label class="col-sm-3 control-label">对应连接:</label>
                                                        <label class="col-sm-3 control-label"
                                                               style="width: 22%;text-align: left;">
                                                            <input id="minprogramcheckedid" type="radio" name="linkType"
                                                                   value="2"
                                                                   onclick="checkboxOnclick(this,2)">
                                                            微信H5:
                                                        </label>
                                                        <div class="col-sm-6 form-inline">
                                                            <input id="h5id" disabled="true" style="width: 100%"
                                                                   type="text"
                                                                   name="link"
                                                                   class="form-control"
                                                                   placeholder="微信H5链接">
                                                            <span>例:https://open.weixin.qq.com/connect/test</span>
                                                            <span>如需新增域名，请向集团申请</span><br/>
                                                            <span name="linktipname" hidden
                                                                  style="color: rgb(204, 0, 0)">请填写H5链接</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label"></label>
                                                    <label class="col-sm-3 control-label"
                                                           style="width: 22%;text-align: left;">
                                                        <input id="appcheckedid" type="radio" name="linkType" value="3"
                                                               onclick="checkboxOnclick(this,3)">
                                                        跳转APPID:
                                                    </label>
                                                    <div class="col-sm-6 form-inline">
                                                        <input id="minprogramappid" disabled="true" style="width: 100%"
                                                               type="text" name="appId"
                                                               class="form-control"
                                                               onkeyup="value=value.replace(/[\u4e00-\u9fa5]/g,'')"
                                                               placeholder="APPID">
                                                        <span name="linktipname" hidden
                                                              style="color: rgb(204, 0, 0)">请填写APPID</span>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label"></label>
                                                    <label class="col-sm-3 control-label"
                                                           style="width: 22%;text-align: left;">
                                                        &nbsp;&nbsp;&nbsp;
                                                        小程序路径:
                                                    </label>
                                                    <div class="col-sm-6 form-inline">
                                                        <input id="minprogramid" disabled="true" style="width: 100%"
                                                               type="text" name="link"
                                                               class="form-control"
                                                               placeholder="小程序路径">
                                                        <span name="linktipname" hidden
                                                              style="color: rgb(204, 0, 0)">请填写小程序路径</span>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label">Banner时间:</label>
                                                    <div class="col-sm-4">
                                                        <div class="input-group">
                                                            <input type="text"
                                                                   class="form-control form_datetime_start_self2"
                                                                   id="startTime"
                                                                   name="bannerStartTime" data-rule="required()">
                                                            <span class="input-group-btn">
                                                    </span>
                                                        </div>
                                                    </div>
                                                    <label class="col-sm-1 control-label"
                                                           style="margin-left: -6%;margin-right: -15px">至</label>
                                                    <div class="col-sm-4">
                                                        <div class="input-group">
                                                            <input type="text"
                                                                   class="form-control form_datetime_end_self2"
                                                                   id="endTime"
                                                                   name="bannerEndTime" data-rule="required()">
                                                            <span class="input-group-btn">
                                                    </span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div id="addbannermallid">
                                                </div>
                                                <script type="text/html" id="thymeleafTable">
                                                    <div id="selectmallsid" class="add-banner-sort">
                                                        <div class="form-group">
                                                            <label class="col-sm-3 control-label">选择位置:</label>
                                                            <button type="button"
                                                                    onclick="deleteAddBannerMallCode(this)"
                                                                    name="cancelselect"
                                                                    class="btn cancel_select">取消
                                                            </button>
                                                            <div class="col-sm-4">
                                                                <select name="sorts" class="form-control">
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="col-sm-3 control-label">选择商场:</label>
                                                            <div class="col-sm-7 select_clazz">
                                                                <select name="mallCodes"
                                                                        multiple="multiple"
                                                                        class="add-banner-mall">
                                                                    <optgroup th:each="cityMall : ${cityContaiMall}"
                                                                              th:label="${cityMall.city}"
                                                                              class="group-1">
                                                                        <option th:each="mall : ${cityMall.malls}"
                                                                                th:value="${mall.mallCode}"
                                                                                th:text="${mall.mallName}">
                                                                        </option>
                                                                    </optgroup>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </script>
                                                <div sec:authorize-url="/work/addSelectMallBanner" class="form-group"
                                                     style="align-content: center">
                                                    <span onclick="addSelectMall()"
                                                          style="width: 80%;margin-left:9%;border-style: solid;border-color: #d2d6de;"
                                                          class="btn">
                                                        <span>+</span>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="modal-footer" style="text-align: center">
                                                <button type="submit" class="btn btn-success" id="save">保存
                                                </button>
                                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                                </button>
                                                <input id="addoreditbannerid" hidden value="">
                                                <input type="text" id="bannerid" name="id" hidden/>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div id="bannerinfomodalid" class="modal fade" style="display: none;">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">×</span></button>
                                <h4 id="modaltitleid" class="modal-title">详情</h4>
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <div class="portlet-body form">
                                        <form id="infoformid" class="form-horizontal">
                                            <div class="form-body">
                                                <div id="showbannerinfoid">
                                                    <div class="form-group">
                                                        <label class="col-sm-3 control-label">Banner名称:</label>
                                                        <div class="col-sm-9">
                                                            <label class="col-sm-3 control-label"
                                                                   style="text-align: left;margin-left:-3%"
                                                                   id="shownameid"></label>
                                                        </div>
                                                    </div>
                                                    <div class="form-group form-inline">
                                                        <label class="col-sm-3 control-label">上传图片:</label>
                                                        <div class="col-sm-7">
                                                            <label class="col-sm-3 control-label"
                                                                   style="margin-left:-10%">主图:</label>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-sm-3 control-label"></label>
                                                        <div class="col-sm-9">
                                                            <img id="showbigshowurlid" style="height: 20%;width: 30%">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-sm-3 control-label"></label>
                                                        <div class="col-sm-7">
                                                            <span>小图:</span>
                                                        </div>
                                                    </div>

                                                    <div class="form-group">
                                                        <label class="col-sm-3 control-label"></label>
                                                        <div class="col-sm-9">
                                                            <img id="showsmallshowurlid" style="height: 20%;width: 30%">
                                                        </div>
                                                    </div>
                                                    <div id="showlinkid">
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-sm-3 control-label">Banner时间:</label>
                                                        <div class="col-sm-9">
                                                            <div class="col-sm-8 form-inline">
                                                                <label class="col-sm-10 control-label"
                                                                       id="showbannertimeid"
                                                                       style="text-align: left;margin-left:-12%"></label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div sec:authorize-url="/work/addSelectMallBanner">
                                                    <div id="showaddbannermallid">
                                                    </div>
                                                    <div id="showaddselectid" class="form-group"
                                                         style="align-content: center">
                                                    <span onclick="showSentDownSelectMall()"
                                                          style="width: 80%;margin-left:9%;border-style: solid;border-color: #d2d6de;"
                                                          class="btn">
                                                        <span>+</span>
                                                    </span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="modal-footer" style="text-align: center">
                                                <button id="savebtnid" type="button" class="btn btn-success">确定
                                                </button>
                                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                                </button>
                                            </div>
                                            <input type="text" hidden id="sentdownbannerid" name="id">
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div id="bannerOrderModal" class="modal fade" style="display: none;">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">×</span></button>
                                <h4 class="modal-title">排序和上下架</h4>
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <div class="portlet-body form">
                                        <form class="form-horizontal" role="form" id="sortformid"
                                              enctype="multipart/form-data"
                                              method="post">
                                            <div style="width:auto;overflow-y:auto;margin-left: 1%"
                                                 class="dataTables_wrapper no-footer">
                                                <table class="table table-striped table-bordered table-hover"
                                                       style="width: 99%">
                                                    <thead>
                                                    <tr>
                                                        <!--设置第一列为序号列(datatable自动生成)-->
                                                        <th style="min-width: 20px;">序号</th>
                                                        <th style="min-width: 60px">Banner名称</th>
                                                        <th style="min-width: 100px">Banner时间</th>
                                                        <th style="min-width: 60px">操作</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr>
                                                        <td id="sort_1" name="">1</td>
                                                        <input hidden name="sortBanner[0].sort" value=1>
                                                        <td>
                                                            <select onmouseenter="bannerSelect(this)"
                                                                    class="select_banner_sort"
                                                                    onchange="changeBanerSelect(this)">>
                                                                <option banner_time="" value="-1">--请选择--</option>
                                                            </select>
                                                        </td>
                                                        <td name="showbannertimename">
                                                            <span></span>
                                                        </td>
                                                        <td>
                                                        <span><button disabled="disabled" type="button"
                                                                      onclick="toSentDown(this)"
                                                                      class="btn btn-success">下架</button></span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td id="sort_2">2</td>
                                                        <input hidden name="sortBanner[1].sort" value=2>
                                                        <td>
                                                            <select class="select_banner_sort"
                                                                    onmouseenter="bannerSelect(this)"
                                                                    onchange="changeBanerSelect(this)">>
                                                                <option banner_time="" value="-1">--请选择--</option>
                                                            </select>
                                                        </td>
                                                        <td name="showbannertimename">
                                                            <span></span>
                                                        </td>
                                                        <td>
                                                        <span><button disabled="disabled" type="button"
                                                                      onclick="toSentDown(this)"
                                                                      class="btn btn-success">下架</button></span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td id="sort_3">3</td>
                                                        <input hidden name="sortBanner[2].sort" value=3>
                                                        <td>
                                                            <select class="select_banner_sort"
                                                                    onmouseenter="bannerSelect(this)"
                                                                    onchange="changeBanerSelect(this)">>
                                                                <option banner_time="" value="-1">--请选择--</option>
                                                            </select>
                                                        </td>
                                                        <td name="showbannertimename">
                                                            <span></span>
                                                        </td>
                                                        <td>
                                                        <span><button disabled="disabled" type="button"
                                                                      onclick="toSentDown(this)"
                                                                      class="btn btn-success">下架</button></span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td id="sort_4">4</td>
                                                        <input hidden name="sortBanner[3].sort" value=4>
                                                        <td>
                                                            <select class="select_banner_sort"
                                                                    onmouseenter="bannerSelect(this)"
                                                                    onchange="changeBanerSelect(this)">
                                                                <option banner_time="" value="-1">--请选择--</option>
                                                            </select>
                                                        </td>
                                                        <td name="showbannertimename">
                                                            <span></span>
                                                        </td>
                                                        <td>
                                                        <span><button disabled="disabled" type="button"
                                                                      onclick="toSentDown(this)"
                                                                      class="btn btn-success">下架</button></span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td id="sort_5">5</td>
                                                        <input hidden name="sortBanner[4].sort" value=5>
                                                        <td>
                                                            <select class="select_banner_sort"
                                                                    onmouseenter="bannerSelect(this)"
                                                                    onchange="changeBanerSelect(this)">>
                                                                <option banner_time="" value="-1">--请选择--</option>
                                                            </select>
                                                        </td>
                                                        <td name="showbannertimename">
                                                            <span></span>
                                                        </td>
                                                        <td>
                                                        <span><button disabled="disabled" type="button"
                                                                      onclick="toSentDown(this)"
                                                                      class="btn btn-success">下架</button></span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td id="sort_6">6</td>
                                                        <input hidden name="sortBanner[5].sort" value=6>
                                                        <td>
                                                            <select class="select_banner_sort"
                                                                    onmouseenter="bannerSelect(this)"
                                                                    onchange="changeBanerSelect(this)">>
                                                                <option banner_time="" value="-1">--请选择--</option>
                                                            </select>
                                                        </td>
                                                        <td name="showbannertimename">
                                                            <span></span>
                                                        </td>
                                                        <td>
                                                        <span><button disabled="disabled" type="button"
                                                                      onclick="toSentDown(this)"
                                                                      class="btn btn-success">下架</button></span>
                                                        </td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                            <div class="modal-footer" style="text-align: center">
                                                <button type="button" class="btn btn-success" data-dismiss="modal"
                                                        onclick="grounding()">上架
                                                </button>
                                                <button type="button" class="btn btn-default" data-dismiss="modal">取消
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script th:inline="javascript">
            var admin = [[${admin}]];
            var posterObj = $.parseJSON([[${posterObj}]]);
        </script>
        <script type="application/javascript">
            var table;
            $(function () {
                var columns = [
                    // 占位列，用于生成序号
                    {data: null},
                    {data: "id"},
                    {data: "name"},
                    {
                        render: function (data, type, row) {
                            return null == row.mallName ? '集团' : row.mallName;
                        }
                    },
                    {
                        data: "createTime", render: function (data) {
                            if (data == null) {
                                return " ";
                            } else {
                                return (new Date(data)).Format("yyyy-MM-dd hh:mm");
                            }
                        }
                    },
                    {
                        render: function (data, type, row) {
                            return (new Date(row.startTime)).Format("yyyy-MM-dd") + "~" + (new Date(row.endTime)).Format("yyyy-MM-dd");
                        }
                    },
                    {
                        render: function (data, type, row) {
                            if (null != row.linkType && '' != row.linkType) {
                                if (row.linkType == 1) { // 电子海报
                                    return "<span style='color:blue;'>海报ID</span>:" + row.posterId + "<br/>" +
                                        "<span style='color:blue;'>海报类型</span>:" + (null == row.posterType ? "" : row.posterType) + "<br/>" +
                                        "<span style='color:blue;'>海报名称</span>:" + (null == row.posterName ? "" : row.posterName);
                                } else if (row.linkType == 2) { // 微信H5
                                    return "<span style='color:blue;'>微信H5</span>:" + (null == row.link ? "" : row.link);

                                } else { // 小程序
                                    return "<span style='color:blue;'>APPID</span>:" + (null == row.appId ? "" : row.appId) + "<br/>" +
                                        "<span style='color:blue;'>小程序路径</span>:" + (null == row.link ? "" : row.link);
                                }
                            } else return "";

                        }
                    },
                    {
                        render: function (data, type, row) {
                            return row.status == 0 ? "待上架" : row.status == 1 ? "已上架" : row.status == 2 ? "已下架" : "已失效";
                        }
                    },
                    {
                        render: function (data, type, row) {
                            var downup = "";
                            // 集团登录
                            if (null == admin.mallCode || '' == admin.mallCode) {
                                if (null == row.mallCode || row.mallCode == '') { // 集团下发的banner
                                    if (row.status == 1) { // 下架操作
                                        downup = "<a href='javascript:void(0)' onclick=changeStatus(" + row.id + ",2" + ")>下架 </a>";
                                    } else if (row.status == 2 || row.status == 0) { // 上架操作
                                        downup = "<a href='javascript:void(0)' onclick=changeStatus(" + row.id + ",1" + ")>上架 </a>";
                                    }
                                    // 查看操作
                                    downup += "<a href='javascript:void(0)' onclick=viewBanner(" + row.id + ")>查看 </a>";
                                    // 属于集团的banner，并且banner状态不是上架
                                    if (row.status != 1) {
                                        downup += "<a href='javascript:void(0)' onclick=editBanner(" + row.id + ")>编辑 </a>";
                                    }
                                    // 下发商场操作
                                    downup += "<a href='javascript:void(0)' onclick=downMall(" + row.id + ")>下发商场</a>";
                                } else { // 商场的banner
                                    // 下架操作
                                    if (row.status == 1) {
                                        downup += "<a href='javascript:void(0)' onclick=changeStatus(" + row.id + ",2" + ")>下架 </a>";
                                    }
                                    downup += "<a href='javascript:void(0)' onclick=viewBanner(" + row.id + ")>查看 </a>";
                                }
                            } else { // 商场登陆
                                // 查看操作
                                downup += "<a href='javascript:void(0)' onclick=viewBanner(" + row.id + ")>查看 </a>";
                                // 属于集团的banner，并且banner状态为未上架
                                if (row.status != 1 && (null != row.mallCode && row.mallCode != '')) {
                                    downup += "<a href='javascript:void(0)' onclick=editBanner(" + row.id + ")>编辑 </a>";
                                }
                            }
                            return downup;
                        }
                    }
                ];
                table = initTables("/work/listBanner.json", columns, null);
                // 生成分页连续的序号
                table.on('draw.dt', function () {
                    table.column(0, {
                        search: 'applied',
                        order: 'applied'
                    }).nodes().each(function (cell, i) {
                        i = i + 1;
                        var page = table.page.info();
                        var pageno = page.page;
                        var length = page.length;
                        var columnIndex = (i + pageno * length);
                        cell.innerHTML = columnIndex;
                    });
                });

                // 初始化时间控件
                initDatepicker("");
                initDatepicker(2);
            })

            // 时间控件
            function initDatepicker(num) {
                // 初始化时间控件
                $('.form_datetime_start_self' + num).datetimepicker({
                    language: 'zh-CN', //语言类型
                    weekStart: 1, // 一周从哪一天开始
                    // todayBtn: 1, // 当天日期按钮
                    autoclose: 1, // 选完时间后是否自动关闭
                    todayHighlight: 1, // 当天日期高亮
                    startView: 2,
                    forceParse: 0,
                    showMeridian: 1,
                    maxView: 4, // 最高显示到年份
                    minView: 2,
                    minuteStep: 1, // 分钟间隔为1
                    initialDate: new Date(), // 初始化当前日期
                    format: 'yyyy-mm-dd', // 时间格式
                    pickerPosition: 'bottom-right' // 选择框位置
                }).on('changeDate', function (ev) {
                    var starttime = $(".form_datetime_start_self" + num).val();
                    $(".form_datetime_end_self" + num).datetimepicker('setStartDate', starttime);
                    $(".form_datetime_start_self" + num).datetimepicker('hide');
                    $(".form_datetime_end_self" + num).val("");
                });
                $('.form_datetime_end_self' + num).datetimepicker({
                    language: 'zh-CN', //语言类型
                    weekStart: 1, // 一周从哪一天开始
                    // todayBtn: 1, // 当天日期按钮
                    autoclose: 1, // 选完时间后是否自动关闭
                    todayHighlight: 1, // 当天日期高亮
                    startView: 2,
                    forceParse: 0,
                    showMeridian: 1,
                    maxView: 4, // 最高显示到年份
                    minView: 2,
                    minuteStep: 1, // 分钟间隔为1
                    initialDate: new Date(), // 初始化当前日期
                    format: 'yyyy-mm-dd', // 时间格式
                    pickerPosition: 'bottom-right' // 选择框位置
                }).on('changeDate', function (ev) {
                    var endtime = $(".form_datetime_end_self" + num).val();
                    $(".form_datetime_start_self" + num).datetimepicker('setEndDate', endtime);
                    $(".form_datetime_end_self" + num).datetimepicker('hide');
                });
            }

            // 展示新增模态框
            function showBanner() {
                $("#bannerformid").get(0).reset();
                $("#bigid").text('');
                $("#smallid").text('');
                $("#biguploadId").removeAttr("disabled");
                $("#smalluploadId").removeAttr("disabled");
                $('#starModal').modal();
                $("#addbannermallid").html("");
                $("#showaddbannermallid").html("");
                $("#bigshowurlid").attr("hidden", "true");
                $("#smallshowurlid").attr("hidden", "true");
                if ("" == admin.mallCode || null == admin.mallCode) {
                    addSelectMall();
                }
                $("#h5id").attr("disabled", "disabled");
                $("#minprogramappid").attr("disabled", "disabled");
                $("#minprogramid").attr("disabled", "disabled");

                $("[name=cancelselect]").first().css("display", "none");
                // 加载电子海报
                if (null != admin.mallCode && '' != admin.mallCode) {
                    loadPosterSelect();
                }
                $("[name=linktipname]").attr("hidden", "true");
                $("#addoreditbannerid").val("/work/addBanner.json");
                $("#starModal .modal-title").html("新增");
                $("#save").text("保存");
                $("#bigtipid").attr("hidden", true);
                $("#smalltipid").attr("hidden", true);
                $("#biguploadId").attr("disabled", "disabled");
                $("#smalluploadId").attr("disabled", "disabled");

                $(".form_datetime_end_self2").datetimepicker("setStartDate", "");
                $(".form_datetime_start_self2").datetimepicker("setEndDate", "");
            }

            // 提示已选中还没上传的文件
            var file = $('#file'), aim = $('#aim');
            file.on('change', function (e) {
                var name = e.currentTarget.files[0].name;
                aim.text(name);
            });

            // 上传
            function upload(type) {
                var fileObj = type == 0 ? document.getElementById("bigfileid").files[0] : document.getElementById("smallfileid").files[0];
                var formFile = new FormData();
                formFile.append("action", "UploadVMKImagePath");
                formFile.append("file", fileObj);
                formFile.append("appName", "wechat");
                formFile.append("token", $("#token").val());
                if (fileObj) {
                    $.ajax({
                        url: $("#fileUploadUrl").val(),
                        type: "POST",
                        data: formFile,
                        dataType: "json",
                        cache: false,//上传文件无需缓存
                        processData: false,//用于对data参数进行序列化处理 这里必须false
                        contentType: false, //必须
                        beforeSend: function () {
                        },
                        success: function (data, status) {
                            if (data.code == 200) {
                                if (type == 0) {
                                    $("#biguploadId").attr("disabled", "disabled");
                                    $("#bigtipid").attr("hidden", true);
                                    $("#bigimageurlid").val(data.value.fileUrl + "!");
                                    $("#bigshowurlid").removeAttr("hidden");
                                    $("#bigshowurlid").attr("src", data.value.fileUrl + "!");
                                } else {
                                    $("#smalluploadId").attr("disabled", "disabled");
                                    $("#smalltipid").attr("hidden", true);
                                    $("#smallshowurlid").removeAttr("hidden");
                                    $("#smallimageurlid").val(data.value.fileUrl + "!");
                                    $("#smallshowurlid").attr("src", data.value.fileUrl + "!");
                                }
                                Lobibox.notify('success', {
                                    msg: "上传成功",
                                    sound: false,
                                    delay: 1500
                                });
                            } else {
                                Lobibox.notify('info', {
                                    msg: "网络原因，请重新上传！",
                                    sound: false,
                                    delay: 1500
                                });
                            }
                        }, error: function (data) {
                        }
                    });
                }
            }

            // 选择商场banner位置
            function addSelectMall() {
                // 先判断是否有六个位置选项
                if ($(".add-banner-sort").size() == 6) {
                    Lobibox.notify('info', {
                        msg: "位置已满",
                        sound: false,
                        delay: 1500
                    });
                    return false;
                }
                // 是否已选择商场
                if (!alreadySelectMall()) {
                    return false;
                }
                // 位置选项
                var hasSelectPosition = getHasSelectPosition();
                if ('' == hasSelectPosition) {
                    Lobibox.notify('info', {
                        msg: "位置已满",
                        sound: false,
                        delay: 1500
                    });
                    return false;
                }
                // 重新构造位置选项
                $("#addbannermallid").append($("#thymeleafTable").html());
                var addbannermall = $("#addbannermallid select[name='sorts']");
                $(addbannermall[addbannermall.length - 1]).html(hasSelectPosition);
                var selectMallCodes = $("#addbannermallid [name=mallCodes]");
                $(selectMallCodes[selectMallCodes.length - 1]).multiselect('refresh');
            }

            // 删除选择banner商场
            function deleteAddBannerMallCode(deleteEle) {
                $(deleteEle).parent().parent().remove();
            }

            // 生成剩余option
            function getHasSelectPosition() {
                var lastPositionNum = [1, 2, 3, 4, 5, 6];
                $("#addbannermallid select[name='sorts'] option:selected").each(function () {
                    lastPositionNum.splice(lastPositionNum.indexOf(parseInt($(this).text())), 1);
                });
                var optionsHtml = "";
                for (var i in lastPositionNum) {
                    optionsHtml += "<option value=" + lastPositionNum[i] + ">" + lastPositionNum[i] + "</option>";
                }
                return optionsHtml;
            }

            // 链接选中控制
            function checkboxOnclick(radiobj, type) {
                // postercheckedid minprogramcheckedid appcheckedid
                var domName = $(radiobj).attr('name');
                var $radio = $(radiobj);
                var cancel = false;
                if ($radio.data('waschecked') == true) {
                    cancel = true;
                    $radio.prop('checked', false);
                    $("input:radio[name='" + domName + "']").data('waschecked', false);
                } else {
                    $radio.prop('checked', true);
                    $("input:radio[name='" + domName + "']").data('waschecked', false);
                    $radio.data('waschecked', true);
                }
                $("[name=linktipname]").attr("hidden", "true");
                if (type == 1) {
                    // postid h5id minprogramid minprogramappid
                    if ($(radiobj).is(":checked")) {
                        $("#postselectid").removeAttr("disabled");
                    } else {
                        $('#postselectid').selectpicker('val', "");
                        $("#postselectid").attr("disabled", "true");
                    }
                    $(".dropdown-toggle").removeClass("disabled");
                    $("#h5id").attr("disabled", "true");
                    $("#minprogramid").attr("disabled", "true");
                    $("#minprogramappid").attr("disabled", "true");

                    $("#h5id").val("");
                    $("#minprogramid").val("");
                    $("#minprogramappid").val("");

                    $("#minprogramcheckedid").removeAttr("checked");
                    $("#appcheckedid").removeAttr("checked");
                } else if (type == 2) {
                    $('#postselectid').selectpicker('val', "");
                    $("#postselectid").attr("disabled", "true");
                    if ($(radiobj).is(":checked")) {
                        $("#h5id").removeAttr("disabled");
                    } else {
                        $("#h5id").attr("disabled", "true");
                    }
                    $("#minprogramid").attr("disabled", "true");
                    $("#minprogramappid").attr("disabled", "true");
                    $("#minprogramid").val("");
                    $("#minprogramappid").val("");
                    $("#postercheckedid").removeAttr("checked");
                    $("#appcheckedid").removeAttr("checked");
                    if (cancel) {
                        $("#h5id").val("");
                    }
                    // h5SelectLoad();
                } else if (type == 3) {
                    $('#postselectid').selectpicker('val', "");
                    $("#postselectid").attr("disabled", "true");
                    $("#h5id").attr("disabled", "true");
                    if ($(radiobj).is(":checked")) {
                        $("#minprogramid").removeAttr("disabled");
                        $("#minprogramappid").removeAttr("disabled");
                    } else {
                        $("#minprogramid").attr("disabled", "true");
                        $("#minprogramappid").attr("disabled", "true");
                    }
                    $("#h5id").val("");
                    $("#minprogramcheckedid").removeAttr("checked");
                    $("#postercheckedid").removeAttr("checked");
                    if (cancel) {
                        $("#minprogramid").val("");
                        $("#minprogramappid").val("");
                    }
                }
            }

            // H5海报
            function h5SelectLoad() {
                $("#postselectid").empty();
                var select = $("#postselectid");
                select.append("<option value=''>--请选择--</option>");
                if (null != posterObj && posterObj.dataMap != null && posterObj.dataMap != '') {
                    for (var i = 0; i < posterObj.dataMap.length; i++) {
                        select.append("<option value='" + posterObj.dataMap[i].poster_id + "," + posterObj.dataMap[i].poster_type_name + "," + posterObj.dataMap[i].poster_name + "'>"
                            + "ID:" + posterObj.dataMap[i].poster_id + " " + posterObj.dataMap[i].poster_name + "</option>"
                        )
                    }
                }
                $('#postselectid').selectpicker('refresh');
            }

            // 是否选择商场
            function alreadySelectMall() {
                var selected = true;
                if ($(".add-banner-sort").size() == 0) {
                    return true;
                }
                // 是否选择
                $("[name=mallCodes]").each(function () {
                    if (null == $(this).val()) {
                        Lobibox.notify('info', {
                            msg: "请选择商场",
                            sound: false,
                            delay: 1500
                        });
                        selected = false;
                    }
                });
                return selected;
            }


            // 新增banner
            new SMValidator('#bannerformid', {
                submit: function (valid, form) {
                    if (valid) {
                        // 文件是否上传
                        if ('' == $("#bigimageurlid").val()) {
                            if (('' != $("#bigid").text() && '' == $("#bigimageurlid").val())) {
                                $("#bigtipid").attr("hidden", false);
                            }
                            valid = false;
                        }
                        if ('' == $("#smallimageurlid").val()) {
                            if ('' != $("#smallid").text() && '' == $("#smallimageurlid").val()) {
                                $("#smalltipid").attr("hidden", false);
                            }
                            valid = false;
                        }
                        if (!valid) {
                            Lobibox.notify('info', {
                                msg: "请先上传图片",
                                sound: false,
                                delay: 1500
                            });
                            return;
                        }
                        // addbannermallid 下发时是否有商场没有选择
                        !alreadySelectMall() ? valid = false : valid = true;
                    }

                    // S 校验链接字段
                    if (1 == $("input[name='linkType']:checked").val()) {
                        if ('' == $("#postselectid option:selected").val()) {
                            $("input[name='linkType']:checked").parent().parent().find("span").removeAttr("hidden");
                            valid = false;
                        }
                    } else if (2 == $("input[name='linkType']:checked").val()) {
                        if ("" == $("#h5id").val()) {
                            $("input[name='linkType']:checked").parent().parent().find("span").removeAttr("hidden");
                            valid = false;

                        }
                    } else if (3 == $("input[name='linkType']:checked").val()) {
                        if ("" == $("#minprogramappid").val()) {
                            $("input[name='linkType']:checked").parent().parent().find("span").removeAttr("hidden");

                            valid = false;
                        }
                        if ("" == $("#minprogramid").val()) {
                            $("#minprogramid").parent().find("span").removeAttr("hidden");

                            valid = false;
                        }
                    }
                    // E 校验链接字段

                    if (valid) {
                        // 重新构造表单name，便于映射到实体
                        $("[name=mallCodes]").each(function (key) {
                            $(this).attr("name", "mallCodes[" + key + "]");
                        });
                        $.ajax({
                            url: $("#addoreditbannerid").val(),
                            type: "POST",
                            dataType: "json",
                            data: $("#bannerformid").serialize(),
                            success: function (data, status) {
                                if (status == "success") {
                                    if (null != data.msg) {
                                        Lobibox.notify('info', {
                                            msg: data.msg,
                                            sound: false,
                                            delay: 1500
                                        });
                                    } else {
                                        var msg = $("#addoreditbannerid").val() == '/work/addBanner.json' ? "保存成功" : "更新成功";
                                        Lobibox.notify('success', {
                                            msg: msg,
                                            sound: false,
                                            delay: 1500
                                        });
                                        $("#starModal").modal("hide");
                                        table.ajax.reload();
                                    }
                                } else {
                                    Lobibox.notify('error', {
                                        msg: "保存失败",
                                        sound: false,
                                        delay: 1500
                                    });
                                }
                            }, error: function (data) {
                                Lobibox.notify('error', {
                                    msg: "出错啦:{status:" + data.status + "}",
                                    sound: false,
                                    delay: 1500
                                });
                            }
                        });
                    }
                }
            });

            // 校验图片信息
            function getimginfo(ev, type) {
                var oFile = ev.files[0];
                // 大小
                if (oFile.size > 10 * 1024 * 1024) {
                    Lobibox.notify('info', {
                        msg: "图片大小不合法",
                        sound: false,
                        delay: 1500
                    });
                    return;
                }
                var reader = new FileReader();
                reader.onload = function () {
                    var oImg = new Image();
                    oImg.src = this.result;
                    oImg.onload = function () {
                        if (type == 0) {
                            if ($(oImg).get(0).width != 750 || $(oImg).get(0).height != 750) {
                                Lobibox.notify('info', {
                                    msg: "图片尺寸不合法",
                                    sound: false,
                                    delay: 1500
                                });
                                $(ev).val("");
                                return;
                            }
                            $('#bigid').text(oFile.name);
                            // 清空回显图片
                            $("#bigshowurlid").removeAttr("src");
                            $("#bigshowurlid").attr("hidden", "hidden");
                            $("#bigimageurlid").val("");
                            $("#biguploadId").removeAttr("disabled");
                        } else {
                            if ($(oImg).get(0).width != 606 || $(oImg).get(0).height != 345) {
                                Lobibox.notify('info', {
                                    msg: "图片尺寸不合法",
                                    sound: false,
                                    delay: 1500
                                });
                                $(ev).val("");
                                return;
                            }
                            $('#smallid').text(oFile.name);
                            // 清空回显图片
                            $("#smallshowurlid").removeAttr("src");
                            $("#smallshowurlid").attr("hidden", "hidden");
                            $("#smallimageurlid").val("");
                            $("#smalluploadId").removeAttr("disabled");
                        }
                    };
                };
                reader.readAsDataURL(oFile);
            }

            // 上下架
            function changeStatus(id, type) {
                Lobibox.confirm({
                    title: '提示',
                    msg: "确定" + (type == 2 ? "下架" : "上架") + "吗？",
                    callback: function ($this, select, ev) {
                        if (select == 'yes') {
                            $.ajax({
                                url: "/work/changeBannerStatus.json",
                                type: "POST",
                                dataType: "json",
                                data: {
                                    "id": id,
                                    "status": type
                                },
                                success: function (data, status) {
                                    if (status == "success") {
                                        var msg = "保存成功";
                                        Lobibox.notify('success', {
                                            msg: msg,
                                            sound: false,
                                            delay: 1500
                                        });
                                        table.ajax.reload();
                                    } else {
                                        Lobibox.notify('error', {
                                            msg: "保存失败",
                                            sound: false,
                                            delay: 1500
                                        });
                                    }
                                }, error: function (data) {
                                    Lobibox.notify('error', {
                                        msg: "出错啦:{status:" + data.status + "}",
                                        sound: false,
                                        delay: 1500
                                    });
                                }
                            });
                        }
                    }
                });
            }

            /**
             *  查看banner详情
             */
            function viewBanner(id) {
                $("#showbannerinfoid").css("display", "block");
                $("#showaddselectid").css("display", "none");
                $("#bannerinfomodalid").modal();
                $.ajax({
                    url: "/work/bannerInfo.json",
                    type: "POST",
                    dataType: "json",
                    data: {
                        "id": id
                    },
                    success: function (data, status) {
                        if (status == 'success') {
                            // 回显数据
                            $("#shownameid").text(data.banner.name);
                            $("#showbigshowurlid").attr("src", data.banner.bigImage);
                            $("#showsmallshowurlid").attr("src", data.banner.smallImage);
                            // 对应连接
                            if (null != data.banner.linkType && '' != data.banner.linkType) {
                                var html = "";
                                if (data.banner.linkType == 1) {
                                    // html = "<div class=\"form-group\"><label class=\"col-sm-3 control-label\" style=\"width: 16%;text-align: left;\">电子海报:</label><div class=\"col-sm-6 form-inline\"><input readonly=\"readonly\" style=\"width: 100%\" type=\"text\" class=\"form-control\" value='ID:" + data.banner.posterId + " " + (null == data.banner.posterName ? "" : data.banner.posterName) + "'></div></div>";
                                    html = "<div class=\"form-group\"><label class=\"col-sm-3 control-label\">电子海报:</label><div class=\"col-sm-7\"><input readonly=\"readonly\" type=\"text\" class=\"form-control\" value='ID:" + data.banner.posterId + " " + (null == data.banner.posterName ? "" : data.banner.posterName) + "'></div></div>";
                                } else if (data.banner.linkType == 2) {
                                    html = "<div class=\"form-group\"><label class=\"col-sm-3 control-label\">微信H5:</label><div class=\"col-sm-6 form-inline\"><input readonly=\"readonly\" type=\"text\" class=\"form-control\" onmouseover=\"this.title=this.value\" value='" + (null == data.banner.link ? "" : data.banner.link) + "'></div></div>"
                                } else { // 小程序APP
                                    html = "<div class=\"form-group\"><label class=\"col-sm-3 control-label\">跳转APPID:</label><div class=\"col-sm-6 form-inline\"><input readonly=\"readonly\" type=\"text\" class=\"form-control\" value='" + (null == data.banner.appId ? "" : data.banner.appId) + "'></div></div><div class=\"form-group\"><label class=\"col-sm-3 control-label\">小程序路径:</label><div class=\"col-sm-6 form-inline\"><input readonly=\"readonly\" type=\"text\" class=\"form-control\" value='" + (null == data.banner.link ? "" : data.banner.link) + "'></div></div>";
                                }
                                $("#showlinkid").html(html);
                            } else {
                                $("#showlinkid").html("");
                            }
                            $("#showbannertimeid").text((new Date(data.banner.startTime)).Format("yyyy-MM-dd") + "~" + (new Date(data.banner.endTime)).Format("yyyy-MM-dd"));
                            if (null == admin.mallCode || '' == admin.mallCode) {
                                if (Object.keys(data.sortMall).length > 0) {
                                    showSortMallView(id, data.sortMall);
                                    setSelectDisabled();
                                } else {
                                    $("#showaddbannermallid").html("");
                                }
                            }
                            $("#savebtnid").attr("data-dismiss", "modal");
                        } else {
                            Lobibox.notify('error', {
                                msg: "保存失败",
                                sound: false,
                                delay: 1500
                            });
                        }
                    }, error: function (data) {
                        Lobibox.notify('error', {
                            msg: "出错啦:{status:" + data.status + "}",
                            sound: false,
                            delay: 1500
                        });
                    }
                });
                $("#savebtnid").removeAttr("onclick");
            }


            /**
             * 回显下发商场
             */
            function showSortMallView(id, sortMall) {
                $("#showaddbannermallid").html("");
                // S 该banner是否已经选择商场下发
                var hasSelect = false;
                for (var i in sortMall) {
                    hasSelect = true;
                    break;
                }
                if (!hasSelect) {
                    $("#showaddbannermallid").append($("#thymeleafTable").html());
                    var sortOptionHtml = "";
                    var lastPositionNum = [1, 2, 3, 4, 5, 6];
                    for (var j in lastPositionNum) {
                        sortOptionHtml += "<option value=" + lastPositionNum[j] + ">" + lastPositionNum[j] + "</option>";
                    }
                    var addbannermall = $("#showaddbannermallid select[name='sorts']");
                    $(addbannermall[addbannermall.length - 1]).html(sortOptionHtml);
                    var mallCodes = $("#showaddbannermallid select[name='mallCodes']");
                    $(mallCodes[mallCodes.length - 1]).multiselect('refresh');
                    return false;
                }
                showSortMall(sortMall);
                $("#savebtnid").attr("onclick", "sentDown(" + id + ")");
            }


            /**
             * 组织下发商场select
             */
            function showSortMall(sortMall) {
                // 清空showaddbannermallid
                $("#showaddbannermallid").html("");
                // 已占用序号
                var sortArr = [];
                for (var key in sortMall) {
                    sortArr.push(parseInt(key));
                }
                // 生成商场选择
                for (var i in sortArr) {
                    // 可用序号
                    var lastPositionNum = [1, 2, 3, 4, 5, 6];
                    if (i > 0) {
                        lastPositionNum.splice(lastPositionNum.indexOf(sortArr[i - 1]), 1);
                    }
                    // 生成sortoptionshtml
                    var sortOptionHtml = "";
                    for (var j in lastPositionNum) {
                        sortOptionHtml += "<option value=" + lastPositionNum[j] + ">" + lastPositionNum[j] + "</option>";
                    }
                    // 生成mallselecthtml
                    $("#showaddbannermallid").append($("#thymeleafTable").html());
                    var addbannermall = $("#showaddbannermallid select[name='sorts']");
                    $(addbannermall[addbannermall.length - 1]).html(sortOptionHtml);
                    $(addbannermall[addbannermall.length - 1]).find("option").each(function () {
                        if ($(this).val() == sortArr[i]) {
                            $(this).attr("selected", "selected");
                        }
                    });

                    var mallselects = $('[name=mallCodes]');
                    var mallCodes = [];
                    for (var j in sortMall[sortArr[i]]) {
                        mallCodes.push(sortMall[sortArr[i]][j].mallCode);
                    }
                    // 先初始化select再刷新
                    $(mallselects[mallselects.length - 1]).val(mallCodes);
                    $(mallselects[mallselects.length - 1]).multiselect('refresh');
                }
            }

            /**
             * 设置选项不可选
             */
            function setSelectDisabled() {
                $("#showaddbannermallid [name=cancelselect]").each(function () {
                    $(this).css("display", "none");
                });
                // 设置select不可用
                $('[name=mallCodes]').each(function () {
                    $(this).multiselect('refresh');
                });
                $("#showaddbannermallid select[name='sorts']").each(function () {
                    $(this).attr("disabled", "disabled");
                });
                $('.multiselect').each(function () {
                    $(this).attr("disabled", "disabled");
                });
                $("#showaddselectid").css("display", "none");
            }

            /**
             * 下发商场modal
             */
            function downMall(id) {
                $("#savebtnid").attr("onclick", "sentDown(" + id + ")");
                $("#bannerinfomodalid").modal();
                $.ajax({
                    url: "/work/bannerInfo.json",
                    type: "POST",
                    dataType: "json",
                    async: false,
                    data: {
                        "id": id
                    },
                    success: function (data, status) {
                        if (status == 'success') {
                            $("#modaltitleid").text("下发商场");
                            $("#showbannerinfoid").css("display", "none");
                            // 回显数据
                            showSortMallView(id, data.sortMall);
                            $("[name=cancelselect]").first().css("display", "none");
                            $("#showaddselectid").css("display", "block");
                            $("#savebtnid").removeAttr("data-dismiss");
                        } else {
                            Lobibox.notify('error', {
                                msg: "保存失败",
                                sound: false,
                                delay: 1500
                            });
                        }
                    }, error: function (data) {
                        Lobibox.notify('error', {
                            msg: "出错啦:{status:" + data.status + "}",
                            sound: false,
                            delay: 1500
                        });
                    }
                });
                $("#bannerinfomodalid [name=cancelselect]").first().css("display", "none");
            }

            /**
             * S 下发商场
             */
            function sentDown(id) {
                // 校验是否已经选择商场
                if (!sentDownalreadySelectMall()) {
                    return;
                }
                // 重新构造表单name，便于映射到实体
                $("#bannerinfomodalid [name=mallCodes]").each(function (key) {
                    $(this).attr("name", "mallCodes[" + key + "]");
                });
                $("#sentdownbannerid").val(id);
                $.ajax({
                    url: "/work/sentDown.json",
                    type: "POST",
                    dataType: "json",
                    data: $("#infoformid").serialize(),
                    success: function (data, status) {
                        if (status == "success") {
                            var msg = "下发成功";
                            Lobibox.notify('success', {
                                msg: msg,
                                sound: false,
                                delay: 1500
                            });
                            $("#bannerinfomodalid").modal("hide");
                            table.ajax.reload();
                        } else {
                            Lobibox.notify('error', {
                                msg: "下发失败",
                                sound: false,
                                delay: 1500
                            });
                        }
                    }, error: function (data) {
                        Lobibox.notify('error', {
                            msg: "出错啦:{status:" + data.status + "}",
                            sound: false,
                            delay: 1500
                        });
                    }
                });
            }

            /**
             * 商场下发时添加
             * @returns {boolean}
             */
            function showSentDownSelectMall() {
                // 先判断是否有六个位置选项
                if ($("#showaddbannermallid .add-banner-sort").size() == 6) {
                    Lobibox.notify('info', {
                        msg: "位置已满",
                        sound: false,
                        delay: 1500
                    });
                    return false;
                }
                // 是否已选择商场
                if (!sentDownalreadySelectMall()) {
                    return false;
                }
                // 位置选项
                var hasSelectPosition = sentDowngetHasSelectPosition();
                if ('' == hasSelectPosition) {
                    Lobibox.notify('info', {
                        msg: "位置已满",
                        sound: false,
                        delay: 1500
                    });
                    return false;
                }
                // 重新构造位置选项
                $("#showaddbannermallid").append($("#thymeleafTable").html());
                var addbannermall = $("#showaddbannermallid select[name='sorts']");
                $(addbannermall[addbannermall.length - 1]).html(hasSelectPosition);
                var showSelectMallCodes = $("#showaddbannermallid [name=mallCodes]");
                $(showSelectMallCodes[showSelectMallCodes.length - 1]).multiselect('refresh');
            }

            // 商场下发时判断是否已选择商场
            function sentDownalreadySelectMall() {
                var selected = true;
                if ($("#showaddbannermallid .add-banner-sort").size() == 0) {
                    return true;
                }
                // 是否选择
                $("#showaddbannermallid [name=mallCodes]").each(function () {
                    if (null == $(this).val()) {
                        Lobibox.notify('info', {
                            msg: "请选择商场",
                            sound: false,
                            delay: 1500
                        });
                        selected = false;
                    }
                });
                return selected;
            }

            // 商场下发生成剩余option
            function sentDowngetHasSelectPosition() {
                var lastPositionNum = [1, 2, 3, 4, 5, 6];
                $("#showaddbannermallid select[name='sorts'] option:selected").each(function () {
                    lastPositionNum.splice(lastPositionNum.indexOf(parseInt($(this).text())), 1);
                });
                var optionsHtml = "";
                for (var i in lastPositionNum) {
                    optionsHtml += "<option value=" + lastPositionNum[i] + ">" + lastPositionNum[i] + "</option>";
                }
                return optionsHtml;
            }

            /**
             * E 下发商场
             */

            /**
             * 导出excel
             */
            function exportsExcel() {
                $("#filter_form").attr("action", "/work/exportBannerExcel");
                $("#filter_form").submit();
            }

            /**
             * S 排序
             * 重新组织selectBanner选项
             */
            var banners = [];

            function showOnlineBanner() {
                // 重置表单
                $(".select_banner_sort").each(function () {
                    $($(this).find("option")[0]).attr("selected", "selected")
                })
                $("[name=showbannertimename] span").each(function () {
                    $(this).text("");
                });
                $('#bannerOrderModal').modal();
                $.ajax({
                    type: "get",
                    url: "/work/onlineBannerList",
                    data: {},
                    dataType: 'json',
                    contentType: "application/x-www-form-urlencoded; charset=utf-8",
                    success: function (result) {
                        banners = [];
                        for (var i in result) {
                            if (result[i].status == 1) { // 将上架的banner回显
                                // banner名称
                                $($("#sort_" + result[i].sort).parent().find("td")[1]).html(
                                    result[i].bannerName);
                                // banner时间
                                $($("#sort_" + result[i].sort).parent().find("span")[0]).html(
                                    result[i].startTime + "~" + result[i].endTime);
                                $("#sort_" + result[i].sort).parent().find("button").attr("banner_id", result[i].bannerId);
                                $("#sort_" + result[i].sort).parent().find("button").removeAttr("disabled");
                            }
                            if ('' != result[i].mallCode && null != result[i].mallCode && (result[i].status == '0' || result[i].status == '2')) {
                                banners.push(result[i]);
                            }
                        }
                        // 设定select是否可选
                        setSelectDisable();
                    }
                });
            }

            /**
             * 设定selec是否可选
             */
            function setSelectDisable() {
                $(".select_banner_sort").attr("disabled", "disabled");
                if (banners.length != 0) {
                    $(".select_banner_sort").first().removeAttr("disabled");
                }
            }

            // 重新填充选择banner的select
            function bannerSelect(selectObj) {
                var selectedval = $(selectObj).val();
                // 可选banner 创建新对象并复制banners到doBanners
                var doBanners = banners.concat();
                $(".select_banner_sort option:selected").each(function () {
                    for (var i in banners) {
                        if (banners[i].bannerId == $(this).val() && !($(this.parentNode).is($(selectObj)))) {
                            doBanners.splice(doBanners.indexOf(banners[i]), 1);
                        }
                    }
                });
                // 重新组织select选项
                var selectHtml = "<option banner_time=\"\" value='-1'>--请选择--</option>";
                for (var i in doBanners) {
                    selectHtml += "<option " + ((selectedval == doBanners[i].bannerId) ? "selected" : "") + " banner_time='" + doBanners[i].startTime + "~" + doBanners[i].endTime + "' value=" + doBanners[i].bannerId + " banner_status=" + doBanners[i].status + ">" + doBanners[i].bannerName + "</option>";
                }
                $(selectObj).html(selectHtml);
            }

            // select改变事件
            function changeBanerSelect(bannerSelectObj) {
                if ($(bannerSelectObj).val() == "-1") {
                    $(".select_banner_sort").each(function (key) {
                        if (!$(this).is($(bannerSelectObj)) && key >= $($(bannerSelectObj).parent().parent().find("td")[0]).text()) {
                            $(this).find("option:first").prop("selected", 'selected');
                            $(this).attr("disabled", "disabled");
                            $($(this).parent().parent().find("span")[0]).text("");
                        }
                    });
                    $($(bannerSelectObj).parent().parent().find("span")[0]).text("");
                } else {
                    $($(bannerSelectObj).parent().parent().find("span")[0]).text($(bannerSelectObj).find("option:selected").attr("banner_time"));
                    if (banners.length != 0) {
                        $(".select_banner_sort").each(function (key) {
                            if ($(this).is($(bannerSelectObj))) {
                                if (key + 1 <= banners.length) {
                                    $($(".select_banner_sort").get(key + 1)).removeAttr("disabled");
                                }
                            }
                        })
                    }
                }
            }

            /**
             * 下架, 下架需加入到banners中，其他位置可选
             */
            function toSentDown(sortTdObj) {
                $.ajax({
                    type: "get",
                    url: "/work/removeBanner.json",
                    data: {"bannerId": $(sortTdObj).attr("banner_id")},
                    dataType: 'json',
                    contentType: "application/x-www-form-urlencoded; charset=utf-8",
                    async: false,
                    success: function (data) {
                        if (data) {
                            table.ajax.reload();
                            $(sortTdObj).attr("disabled", "disabled");
                            showOnlineBanner();
                            Lobibox.notify('info', {
                                msg: "下架成功",
                                sound: false,
                                delay: 1500
                            });
                            $.ajax({
                                type: "get",
                                url: "/work/onlineBannerList",
                                data: {},
                                dataType: 'json',
                                contentType: "application/x-www-form-urlencoded; charset=utf-8",
                                async: false,
                                success: function (result) {
                                    banners = [];
                                    for (var i in result) {
                                        if ('' != result[i].mallCode && null != result[i].mallCode && (result[i].status == 0 || result[i].status == 2)) {
                                            banners.push(result[i]);
                                        }
                                    }
                                    var html = "<select onmouseenter=\"bannerSelect(this)\" class=\"select_banner_sort\" onchange=\"changeBanerSelect(this)\">><option banner_time=\"\" value='0'>--请选择--</option></select>";
                                    $($(sortTdObj).parent().parent().parent().find("td").get(1)).html(html);
                                    $($(sortTdObj).parent().parent().parent().find("span").get(0)).html("");
                                    $(sortTdObj).attr("disabled", "disabled");
                                }
                            });
                        }
                    }
                });
                setSelectDisable();
            }

            // 上架
            function grounding() {
                $(".select_banner_sort option:selected").each(function () {
                    if ($(this).val() != '') {
                        $(this).parent().attr("name", "sortBanner[" + (parseInt($($(this).parent().parent().parent().find("td").get(0)).text()) - 1) + "].id");
                    }
                });
                $.ajax({
                    type: "POST",
                    url: "/work/putawayBanner.json",
                    data: $("#sortformid").serialize(),
                    dataType: 'json',
                    contentType: "application/x-www-form-urlencoded; charset=utf-8",
                    success: function (result) {
                        if (result) {
                            table.ajax.reload();
                            Lobibox.notify('info', {
                                msg: "上架成功",
                                sound: false,
                                delay: 1500
                            });
                        }
                    }
                });
            }

            /**
             * E 排序
             */

            // 重置
            function resetForm() {
                $('#filter_form').get(0).reset();
                $("#mallId").select2("val", "-1");
            }

            // 加载海报下拉
            function loadPosterSelect() {
                h5SelectLoad();
            }

            /**
             * S 编辑模态框
             */
            function editBanner(id) {
                $("#bannerformid").get(0).reset();
                $("#bigid").text("");
                $("#smallid").text("");
                $("#bannerid").val(id);
                $("#starModal").modal();
                $("#starModal .modal-title").html("编辑");
                $("#save").text("更新");
                $("#addoreditbannerid").val("/work/editBanner.json");
                $("#smalluploadId").attr("disabled", "disabled");
                $("#biguploadId").attr("disabled", "disabled");
                // 电子海报初始化
                if (null != admin.mallCode && '' != admin.mallCode) {
                    loadPosterSelect();
                    $("#postselectid").attr("disabled", true);
                }
                $("#bigtipid").attr("hidden", true);
                $("#smalltipid").attr("hidden", true);
                $("[name=linktipname]").attr("hidden", true);
                // 回显数据
                $.ajax({
                    url: "/work/bannerInfo.json",
                    type: "POST",
                    dataType: "json",
                    data: {
                        "id": id
                    },
                    success: function (data, status) {
                        if (status != 'success') {
                            return;
                        }
                        $("#starModal :input[name='name']").val(data.banner.name);
                        // 主图图片
                        $("#bigimageurlid").val(data.banner.bigImage);
                        $("#bigshowurlid").attr("src", data.banner.bigImage);
                        $("#bigshowurlid").removeAttr("hidden");
                        // 小图图片
                        $("#smallimageurlid").val(data.banner.smallImage);
                        $("#smallshowurlid").attr("src", data.banner.smallImage);
                        $("#smallshowurlid").removeAttr("hidden");
                        // banner时间
                        // 开始时间
                        $("#startTime").val((new Date(data.banner.startTime)).Format("yyyy-MM-dd"));
                        // 结束时间
                        $("#endTime").val((new Date(data.banner.endTime)).Format("yyyy-MM-dd"));
                        // initDateTime(2, (new Date(data.banner.startTime)).Format("yyyy-MM-dd"), (new Date(data.banner.endTime)).Format("yyyy-MM-dd"));
                        initDateTime(2, data.banner.startTime, data.banner.endTime);
                        // 回显下发商城
                        if (null == admin.mallCode || '' == admin.mallCode) {
                            if (Object.keys(data.sortMall).length > 0) {
                                editSortMallView(id, data.sortMall);
                                setFirstNoCancel();
                            } else {
                                $("#showaddbannermallid").html("");
                            }
                        }
                        /**
                         * 回显链接
                         */
                        // 设置链接可选
                        if (data.banner.linkType == 1) {
                            checkboxOnclick(document.getElementById("postercheckedid"), 1);
                            $("#postercheckedid").prop("checked", true);
                            $("#postselectid").removeAttr("disabled");
                            $("#postselectid").selectpicker('val', data.banner.posterId + "," + data.banner.posterType + "," + data.banner.posterName);
                        } else if (data.banner.linkType == 2) {
                            checkboxOnclick(document.getElementById("minprogramcheckedid"), 2);
                            $("#minprogramcheckedid").prop("checked", true);
                            $("#h5id").val(data.banner.link);
                            $("#h5id").removeAttr("disabled");
                        } else if (data.banner.linkType == 3) { // 小程序
                            checkboxOnclick(document.getElementById("appcheckedid"), 3);
                            $("#appcheckedid").prop("checked", true);
                            $("#minprogramappid").val(data.banner.appId);
                            $("#minprogramid").val(data.banner.link);
                            $("#minprogramappid").removeAttr("disabled");
                            $("#minprogramid").removeAttr("disabled");
                        }
                    }, error: function (data) {
                        Lobibox.notify('error', {
                            msg: "出错啦:{status:" + data.status + "}",
                            sound: false,
                            delay: 1500
                        });
                    }
                });
            }

            /**
             * 时间控件赋值
             */
            function initDateTime(num, startdatetime, enddatetime) {
                $(".form_datetime_end_self" + num).datetimepicker("setStartDate", new Date(startdatetime).Format("yyyy-MM-dd"));
                $(".form_datetime_start_self" + num).datetimepicker("setEndDate", new Date(enddatetime).Format("yyyy-MM-dd"));
            }

            /**
             * 回显下发商场
             */
            function editSortMallView(id, sortMall) {
                $("#addbannermallid").html("");
                // S 该banner是否已经选择商场下发
                var hasSelect = false;
                for (var i in sortMall) {
                    hasSelect = true;
                    break;
                }
                if (!hasSelect) {
                    $("#addbannermallid").append($("#thymeleafTable").html());
                    var sortOptionHtml = "";
                    var lastPositionNum = [1, 2, 3, 4, 5, 6];
                    for (var j in lastPositionNum) {
                        sortOptionHtml += "<option value=" + lastPositionNum[j] + ">" + lastPositionNum[j] + "</option>";
                    }
                    var addbannermall = $("#addbannermallid select[name='sorts']");
                    $(addbannermall[addbannermall.length - 1]).html(sortOptionHtml);
                    var mallCodes = $("#addbannermallid select[name='mallCodes']");
                    $(mallCodes[mallCodes.length - 1]).multiselect('refresh');
                    return false;
                }
                editSortMall(sortMall);
                $("#savebtnid").attr("onclick", "sentDown(" + id + ")");
            }

            /**
             * 编辑时组织下发商场select
             */
            function editSortMall(sortMall) {
                $("#addbannermallid").html("");
                // 已占用序号
                var sortArr = [];
                for (var key in sortMall) {
                    sortArr.push(parseInt(key));
                }
                // 生成商场选择
                for (var i in sortArr) {
                    // 可用序号
                    var lastPositionNum = [1, 2, 3, 4, 5, 6];
                    if (i > 0) {
                        lastPositionNum.splice(lastPositionNum.indexOf(sortArr[i - 1]), 1);
                    }
                    // 生成sortoptionshtml
                    var sortOptionHtml = "";
                    for (var j in lastPositionNum) {
                        sortOptionHtml += "<option value=" + lastPositionNum[j] + ">" + lastPositionNum[j] + "</option>";
                    }
                    // 生成mallselecthtml
                    $("#addbannermallid").append($("#thymeleafTable").html());
                    var addbannermall = $("#addbannermallid select[name='sorts']");
                    $(addbannermall[addbannermall.length - 1]).html(sortOptionHtml);
                    $(addbannermall[addbannermall.length - 1]).find("option").each(function () {
                        if ($(this).val() == sortArr[i]) {
                            $(this).attr("selected", "selected");
                        }
                    });
                    var mallselects = $('#addbannermallid [name=mallCodes]');
                    var mallCodes = [];
                    for (var j in sortMall[sortArr[i]]) {
                        mallCodes.push(sortMall[sortArr[i]][j].mallCode);
                    }
                    // 先初始化select再刷新
                    $(mallselects[mallselects.length - 1]).val(mallCodes);
                    $(mallselects[mallselects.length - 1]).multiselect('refresh');
                }
            }

            // 设置第一个不可取消
            function setFirstNoCancel() {
                $("#addbannermallid [name=cancelselect]").first().css("display", "none");
            }

            /**
             * E 编辑模态框
             */
        </script>
    </section>
</div>
</body>
</html>